<template>
    <div class="dept-page">
        <div class="dept-page-left" v-loading="loadDept">
            <n-input
                v-model:value="pattern"
                placeholder="请输入部门名称搜索"
                class="dept-page-left-input"
            />
            <n-scrollbar style="flex: 1">
                <n-tree
                    :pattern="pattern"
                    :data="deptData"
                    block-line
                    check-on-click
                    checkable
                    :checked-keys="checkedKeys"
                    @update:checked-keys="onCheckedKeys"
                />
            </n-scrollbar>
        </div>
        <div class="dept-page-right">
            <ProTable
                :list="searchList"
                :columns="columns"
                :api="global.$api.MockGetUserList"
                :rowKey="(row) => row.id"
            />
        </div>
    </div>
</template>
<script setup>
import { h, inject, onMounted, ref } from "vue";
import ProTable from "@/common/ProTable/index.vue";
import TableActions from "@/common/ProTable/Actions.vue";

const global = inject("global");

onMounted(() => {
    getTreeDept();
});

const formatTree = (arr) => {
    arr.map((v) => {
        v.key = v.id;
        v.label = v.name;
        if (v.children) formatTree(v.children);
        return v;
    });
    return arr;
};

const pattern = ref("");
const deptData = ref([]);
const loadDept = ref(false);

const getTreeDept = async () => {
    loadDept.value = true;
    let res = await global.$api.MockGetTreeDept();
    loadDept.value = false;
    if (res.code === 200) {
        const { data } = res;
        let _deptData = formatTree(data);
        deptData.value = _deptData;
    }
};

const checkedKeys = ref([]);
const onCheckedKeys = (keys) => {
    //设置只能选择一项
    checkedKeys.value = [keys[keys.length - 1]];
};

const searchList = [
    {
        component: "NInput",
        key: "name",
        label: "姓名",
        defaultVal: "",
        props: {
            clearable: true,
        },
    },
];

const columns = [
    { type: "selection" },
    {
        title: "所属部门",
        key: "dept",
        align: "center",
    },
    {
        title: "姓名",
        key: "name",
        align: "center",
    },
    {
        title: "操作",
        key: "actions",
        align: "center",
        render: () => {
            return h(TableActions, {
                list: [{ title: "编辑", key: "edit" }],
            });
        },
    },
];
</script>
<style lang="less" scoped>
.dept-page {
    display: flex;
    max-height: calc(100vh - 120px);
    &-left {
        width: 260px;
        min-width: 260px;
        box-sizing: border-box;
        padding: 8px 12px;
        background: var(--image-error-bg-color);
        border-radius: var(--border-radius);
        margin-right: 12px;
        display: flex;
        flex-direction: column;
        &-input {
            margin-bottom: 8px;
        }
        :deep(.n-tree-node) {
            padding: 4px 8px;
        }
        :deep(.n-tree-node-switcher__icon) {
            width: 18px;
            height: 18px;
            svg {
                width: 18px;
                height: 18px;
            }
        }
    }
    &-right {
    }
}
</style>
